// API 分类
function fenlei(){
    let arr = [
        {text:"全部", tip:"all" },
        {text:"生活服务", tip:"服务"},
        {text:"金融科技" ,tip:"科技"},
        {text:"交通地理", tip:"地理"},
        {text:"充值缴费",tip:"缴费"},
        {text:"数据智能",tip:"数据"},
        {text:"企业工商",tip:"工商" },
        {text:"应用开发" ,tip:"开发"},
        {text:"电子开发" ,tip:"电子"},
        {text:"吃喝玩乐" ,tip:"玩乐"},
        {text:"文娱视频",tip:"视频" },
        {text:"免费接口大全" ,tip:"接口"},
        {text:"短信",tip:"6" },
        {text:"汽车" ,tip:"车"},
        {text:"核酸核验",tip:"核验" },
        {text:"最新发布",tip:"最新"},
        {text:"API私有化部署",tip:"API" },
    ]

    let str = ""
    let ul = document.querySelector(".sort ul")
    // console.log(ul);
        for(let i=0; i<arr.length;i++){
            //字符串拼接
            str+=`<li class="li-item" tip=${arr[i].tip}>${arr[i].text}</li>`
            //添加自定义属性
        }
    
    ul.innerHTML = str
    
    let span = document.querySelector(".search .con")
    let input= document.querySelector(".search input")
    ul.addEventListener("click",function(e){
        if(e.target.nodeName == "LI"){
            span.textContent = e.target.textContent
        }
        //获取自定义属性
        let tip = e.target.getAttribute("tip")
        input.setAttribute("placeholder",tip)

        // 修改样式
        let lis = ul.children
        for(let a = 0; a<lis.length; a++){
            //排他
            lis[a].classList.remove("active")
        }
        //点击添加样式
        e.target.classList.add("active")
    })
}
fenlei()

//Api服务
let arrs = [   
    [{ src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},],
 
 
    [
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
    { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
    { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
    { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
    { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
    { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},],
 
 
    [
     { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
     { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
     { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
     { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
     { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},
     { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
     { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
     { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
     { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
     { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},],
 
 
     [
         { src: "./images/API_01.jpg",name:"2021出行防疫政策指南",price:"0", special:false},
         { src: "./images/API_02.jpg",name:"身份证实名认证",price:"0.2000",special:true},
         { src: "./images/API_03.jpg",name:"天气预报",price:'0',special:false},
         { src: "./images/API_04.jpg",name:"银行卡四元素校验",price:"0.3360",special:true},
         { src: "./images/API_05.jpg",name:"短信API服务",price:"0.0400",special:true},],
 ]  
 function fuwu(arr){
     //获取ul
     let ul = document.querySelector(".serve")
     //设置一个空字符串
     let str = ""
     //遍历获取所有数据
     for(let a=0;a<arr.length;a++){
         //拼接
         str+=`<li class="serve-item">
         <div class="dh">
             <img src="${arr[a].src}" alt="">
             <h5>${arr[a].name}</h5>
             <p class="price ${arr[a].price==0? "g":"r"}">${arr[a].price==0? "免费":"￥"+arr[a].price+"/次"}</p>
         </div>
         <button>申请数据</button>
         
         `
         //判断是否需要添加
         if(arr[a].special===true){
             str+=`<div class="special">企业专用</div> </li>
             `
         }else{
             str+=`</li>
             `
         }
     }
     ul.innerHTML = str
 
    
    let imgs = document.querySelectorAll("img")
    imgs.forEach(function(img,i){
        img.addEventListener("click",function(){
            location.href = "api-details.html"
        })
    })
     
 }
 fuwu(arrs[0])
 
 let index = 0
 
 //获取所有的span
 //批量注册点击事件
 function tiaozhuan (){
     let next = document.querySelector(".ts")
     let spans =document.querySelectorAll(".page .tz")
     spans.forEach(function(span,i){
         span.addEventListener("click",function(){
            spans[index].classList.remove("on")
            span.classList.add("on")
            index = i
            fuwu(arrs[index])
         })
         
     })
     // 下一页
     next.addEventListener("click",function(){
          spans.forEach(function(span,i){
            span.classList.remove("on")
        })
         index++
         if(index===4){
             index=0
         }
         fuwu(arrs[index])
     })
    }
 tiaozhuan()

 function mask(){
     //  模态框

let btns = document.querySelectorAll(".serve-item button")
let mask = document.querySelector(".mot")
let lis = document.querySelectorAll(".serve-item")
//注册点击事件
btns.forEach(function(btn){
    btn.addEventListener("click",function(){
        mask.style.display = "block"
    })
})

//点击移除模态
mask.addEventListener("click",function(e){
    if(e.target.className==="mot"){
        mask.style.display = "none"
}
})

// 模态框选项卡
let dls = document.querySelectorAll(".dl")
let logins = document.querySelectorAll(".nr .login")
    console.log(dls,logins);
//批量注册点击事件
dls.forEach(function(dl,i){
    dl.addEventListener("click",function(){
        dls.forEach(function(a){
            a.classList.remove("active")
        })
        dl.classList.add("active")
        logins.forEach(function(b){
            b.classList.remove("on")
        })
        logins[i].classList.add("on")
    })
})
 }
mask()